﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucDetails.ascx.cs" Inherits="ucControl_ucDetails" %>
<div class="details_left">
    <a class="jqzoom" title="Wallpaper 001" style="outline-style: none; text-decoration: none;
        cursor: crosshair; display: block; position: relative;" href="images/008_2.jpg">
        <img title="" src="images/008_2.jpg" alt="Erina" id="product_img"></a>
    <div class="details_left_img">
        <div class="elastislide-carousel">
            <ul style="transition: all 0s ease 0s; display: block; max-height: 84px;" id="carousel"
                class="elastislide-list">
                <li>
                    <div style="float: left;">
                        <a href="#">
                            <img src="images/002.jpg" height="75" width="75"></a>
                    </div>
                </li>
                <li>
                    <div style="float: left;">
                        <a href="#">
                            <img src="images/001.jpg" height="75" width="75"></a>
                    </div>
                </li>
                <li>
                    <div style="float: left;">
                        <a href="#">
                            <img src="images/009.jpg" height="75" width="75"></a>
                    </div>
                </li>
                <li>
                    <div style="float: left;">
                        <a href="#">
                            <img src="images/006.jpg" height="75" width="75"></a>
                    </div>
                </li>
                <li>
                    <div style="float: left;">
                        <a href="#">
                            <img src="images/008.jpg" height="75" width="75"></a>
                    </div>
                </li>
            </ul>
            <!-- slide click next/pre hình nhỏ  -->
            <link rel="stylesheet" type="text/css" href="js_details/custom.css" />

            <script type="text/javascript" src="js_details/jquery_002.js"></script>

            <script type="text/javascript" src="js_details/modernizr.js"></script>

            <script type="text/javascript" src="js_details/jquery.js"></script>

            <script type="text/javascript">

                $('#carousel').elastislide();
			
            </script>

            <!-- end slide click next/pre hình nhỏ  -->
        </div>
    </div>
</div>
<div class="details_right">
    <h2>
        Wallpaper 001</h2>
    <p class="price">
        Price:<strong> $120</strong></p>
    <p style="font-weight: bold;">
        Choose Paper:
        <select class="paper" name="">
            <option>Paper 1</option>
            <option>Paper 2</option>
            <option>Paper 3</option>
            <option>Paper 4</option>
        </select></p>
    <p>
        <input class="input" name="" value="Buy now" type="button" />
    </p>
    <p>
        Pattern Repeat: 64.1cm Half match</p>
    <p>
        Size: 52cm x 10 metres</p>
    <p>
        Delivery: 2 weeks</p>
    <p>
        Type: Non Woven paste the wall</p>
    <p>
        Cleaning: Spongeable
    </p>
</div>
<!-- Zoom images -->
<link href="js_details/jqzoom.css" rel="stylesheet" type="text/css" media="screen">

<script src="js_details/jquery_003.js" type="text/javascript"></script>

<script src="js_details/jqzoom.txt" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        var options = {
            zoomWidth: 430,
            zoomHeight: 384,
            xOffset: 0,
            yOffset: 0,
            showEffect: 'fadein',
            hideEffect: 'fadeout',
            fadeinSpeed: 'fast',
            fadeoutSpeed: 'fast',
            position: "right",
            lens: false
        };

        $(".jqzoom").jqzoom(options);

    });

    $(document).ready(function() {
        $(".sendFriend").colorbox({ width: "430px", height: "384px", iframe: true });

        $("a#SizeGuide").fancybox({
            'titleShow': false,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic'
        });

        $('ul.sizelist-colour li').click(function() {
            $('ul.sizelist-colour li').removeClass('current');
            $(this).addClass('current');
            $('#color_sel').val($(this).attr('rel'));
            $('#SelectedColourDisplay').html($(this).attr('title'));

            toggleColor($(this).attr('rel'));
        });

        $('ul.sizelist-size li').live('click', function() {
            $('ul.sizelist-size li').removeClass('current');
            $(this).addClass('current');
            $('#size_sel').val($(this).find('span').html());
            $('#SelectedSizeDisplay').html($(this).find('span').html());
        });

        var url_color = decodeURIComponent($.QueryString("color"));
        var url_color_matched = 0;
        if (url_color != "") {
            $("#color_sel option").each(function() {
                if ($(this).text() == url_color) {
                    url_color_matched = 1;
                    $(this).attr('selected', true);
                }
            });
        }

        if (colorImgArr.length > 0) {
            setColorSizes(document.addForm.color_sel);
            toggleColor($('#color_sel').val());
        }
        else {
            $('#color_sel, #AddToCartButton').hide();
            $('#color_sel, #AddToCartButton').parent('p').hide();
        }
    });

</script>

<!-- End Zoom images -->
